

import { StyleSheet, Platform } from 'react-native';

export default StyleSheet.create({
  container: {
    marginHorizontal: 16,
    marginBottom: 12,
    borderRadius: 12,
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 4 },
        shadowOpacity: 0.3,
        shadowRadius: 6,
      },
      android: {
        elevation: 4,
      },
    }),
  },
  cardGradient: {
    borderRadius: 12,
    padding: 16,
  },
  content: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    gap: 12,
  },
  checkboxContainer: {
    paddingTop: 2,
  },
  checkbox: {
    width: 20,
    height: 20,
    borderWidth: 2,
    borderColor: '#6366f1',
    borderRadius: 4,
    backgroundColor: 'transparent',
    alignItems: 'center',
    justifyContent: 'center',
  },
  checkboxSelected: {
    backgroundColor: '#6366f1',
  },
  checkboxIcon: {
    fontSize: 12,
    color: '#FFFFFF',
    fontWeight: 'bold',
  },
  mainContent: {
    flex: 1,
  },
  titleRow: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    justifyContent: 'space-between',
    marginBottom: 8,
    gap: 8,
  },
  title: {
    flex: 1,
    fontSize: 14,
    fontWeight: '500',
    color: '#FFFFFF',
    lineHeight: 20,
  },
  priorityBadge: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 12,
  },
  priorityHigh: {
    backgroundColor: 'rgba(245, 158, 11, 0.2)',
  },
  priorityMedium: {
    backgroundColor: 'rgba(99, 102, 241, 0.2)',
  },
  priorityNormal: {
    backgroundColor: 'rgba(107, 114, 128, 0.2)',
  },
  priorityText: {
    fontSize: 12,
    fontWeight: '500',
    color: '#F59E0B',
  },
  detailsContainer: {
    gap: 4,
  },
  detailRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
  },
  detailIcon: {
    fontSize: 12,
    color: '#9CA3AF',
    width: 16,
  },
  detailText: {
    fontSize: 12,
    color: '#9CA3AF',
    flex: 1,
  },
  rightContent: {
    alignItems: 'flex-end',
    gap: 4,
  },
  timeAgo: {
    fontSize: 12,
    color: '#9CA3AF',
  },
  chevronIcon: {
    fontSize: 14,
    color: '#6B7280',
  },
});

